<template>
	<view class="order-info">
		<view class="order-status-box">
			<view class="order-status">{{ orderInfo.endTime ? '已完成' : '未完成' }}</view>
			<view class="order-help" @click="jumpPage('/packMyself/help/help')">
				<u-icon name="question-circle-fill" />
				需要帮助
			</view>
		</view>
		<view class="order-info-box">
			<view class="info-nav">
				<u-row>
					<u-col span="8">
						<view class="text-box">
							<text class="custom-icon custom-icon-time"></text>
							{{ filterTime(orderInfo) }}
						</view>
					</u-col>
					<u-col span="4">
						<view class="text-box">
							<text class="custom-icon custom-icon-jine color-blue"></text>
							<!-- <u-icon name="rmb-circle" color="#2979ff" size="24"></u-icon> -->
							{{ orderInfo.amount }}元
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="info-title">充电明细</view>
			<view class="item-info">
				<view>订单编号</view>
				<view class="info-value" @click="copyFunc(orderInfo.id)">
					{{ orderInfo.id }}
					<text class="copy-style">复制</text>
				</view>
			</view>
			<view class="item-info">
				<view>订单金额</view>
				<view class="info-value">￥{{ orderInfo.amount }}</view>
			</view>
			<view class="item-info">
				<view>支付方式</view>
				<view class="info-value">{{ orderInfo.chargingMode === 2 ? '刷卡充电' : '扫码充电' }}</view>
			</view>
			<view class="item-info">
				<view>充电时间</view>
				<view class="info-value">{{ orderInfo.chargingTime === 0 ? '充满自停' : orderInfo.chargingTime + '分钟' }}</view>
			</view>
			<view class="item-info">
				<view>结束原因</view>
				<view class="info-value">{{ filterEndReason(orderInfo.endReason) }}</view>
			</view>
		</view>
		<view class="order-info-box">
			<view class="info-title">订单明细</view>
			<view class="item-info">
				<view>站点名称</view>
				<view class="info-value">{{ orderInfo.siteInfo.siteName }}</view>
			</view>
			<view class="item-info">
				<view>设备名称</view>
				<view class="info-value">{{ orderInfo.equipmentDbInfo.eqName }}</view>
			</view>
			<view class="item-info">
				<view>设备端口</view>
				<view class="info-value">{{ orderInfo.equipmentProp }}号端口</view>
			</view>
			<view class="item-info">
				<view>站点地址</view>
				<view class="info-value">{{ orderInfo.siteInfo.siteAddress }}</view>
			</view>
			<view class="item-info">
				<view>开始时间</view>
				<view class="info-value">{{ orderInfo.startTime }}</view>
			</view>
			<view class="item-info">
				<view>结束时间</view>
				<view class="info-value">{{ orderInfo.endTime || '订单未结束' }}</view>
			</view>
			<view class="item-info">
				<view>充电方式</view>
				<view class="info-value">{{ orderInfo.chargingMode == 2 ? '刷卡充电' : '扫码充电' }}</view>
			</view>
			<view class="item-info">
				<view>设备ID</view>
				<view class="info-value">{{ orderInfo.equipmentDbInfo.id || '' }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { filterTime } from './components/data.js';
export default {
	data() {
		return {
			orderId: null, // 订单id
			orderInfo: {}, // 订单详情
			filterTime
		};
	},
	onLoad(option) {
		if (option.id) {
			this.orderId = option.id;
		}
	},
	onShow() {
		this.getOrderInfo();
	},
	methods: {
		// 跳转页面
		jumpPage(url) {
			uni.navigateTo({
				url
			});
		},
		// 过滤结束原因
		filterEndReason(endReason) {
			const endReasonList = [
				{ name: '充满自停', id: 1 },
				{ name: '功率过低', id: 2 },
				{ name: '功率过高', id: 3 },
				{ name: '零功率', id: 4 },
				{ name: '充电器被拔出', id: 5 }
			];
			const info = endReasonList.filter(item => {
				return item.id == endReason;
			});
			return info.length == 0 ? '' : info[0].name;
		},
		//  复制函数
		copyFunc(item) {
			uni.setClipboardData({
				data: item, //要被复制的内容
				success: () => {
					//复制成功的回调函数
					uni.showToast({
						icon: 'none',
						title: '订单号复制成功'
					});
				}
			});
		},
		// 获取订单详情
		async getOrderInfo() {
			const res = await this.$api.order.info({ id: this.orderId });
			if (res.code == 200) {
				this.orderInfo = res.data;
			}
		}
	}
};
</script>

<style lang="scss">
.order-info {
	.order-status-box {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background: #fff;
		font-size: 34rpx;
		font-weight: bold;
		.order-status {
			line-height: 46rpx;
		}
		.order-help {
			background: #e4e4e4;
			display: flex;
			line-height: 50rpx;
			font-size: 22rpx;
			height: 50rpx;
			padding: 0rpx 25rpx;
			border-radius: 50px;
		}
	}
	.order-info-box {
		margin: 30rpx 30rpx 0;
		background: #fff;
		padding: 30rpx;
		border-radius: 5rpx;
		.info-title {
			font-size: 28rpx;
			font-weight: bold;
			font-weight: bold;
		}
		.info-nav {
			padding-bottom: 30rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px #ccc solid;
			font-size: 32rpx;
			font-weight: bold;
			.custom-icon {
				font-size: 48rpx;
				color: #489421;
			}
			.text-box {
				display: flex;
				line-height: 15rpx;
				.custom-icon {
					margin-right: 10rpx;
				}
				.color-blue {
					color: #2979ff;
				}
			}
		}
		.item-info {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #999;
			line-height: 50rpx;
			.copy-style {
				color: $u-success;
			}
			.info-value {
				color: #333;
				width: 400rpx;
				text-align: right;
			}
		}
	}
}
</style>
